<template>
	<view>
		<view class="card_content">
			<liu-step-bar></liu-step-bar>
			<view class="card_content_line"></view>
			<view class="card_selection">
				<view class="card_selection_one">
					<view class="card_selection_one_item1">
						<view class="selection_icon">
							<image src="/static/order/orderBlueShopIcon.png" mode=""></image>
						</view>
						<view class="selection_one_text">
							<view>伟业汽车美容店(人民路店)</view>
							<view>山阳区人民路33号</view>
						</view>
					</view>
					<view class="card_selection_one_item2">
						<view class="selection_icon">
							<image src="/static/order/orderPeopleIcon.png" mode=""></image>
						</view>
						<view class="selection_one_text2">
							<view>张先生</view>
							<view>18656894566</view>
						</view>
					</view>
					<view class="card_selection_one_item3">
						<view class="selection_icon">
							<image src="/static/order/orderCarIcon.png" mode=""></image>
						</view>
						<view class="selection_one_text3">
							<text>奔驰FWE4/豫A56487</text>
							<image src="/static/order/orderArrowIcon.png" mode="" class="arrow"></image>
						</view>
					</view>
				</view>
				<view class="card_selection_two">
					<view class="card_selection_two_text1">
						<view>服务产品</view>
						<view>共选择<span class="blue_text">1项</span>服务产品</view>
					</view>
					<view class="card_selection_two_text2">
						<view>精品汽车</view>
						<view>￥39.9</view>
					</view>
				</view>
				<view class="card_selection_three">
					<view class="selection_icon">
						<image src="/static/order/orderCouponIcon.png" mode=""></image>
					</view>
					<view class="card_selection_three_content">
						<view>代金卷/优惠卷</view>
						<view class="card_selection_three_number">
							<view><text class="">-10元</text></view>
							<view>
								<image src="/static/order/orderArrowIcon.png" mode="" class="arrow"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer_content">
				<view class="customer" @click="open">
					<image src="/static/order/orderCustomerIcon.png" mode="">
					</image>
					<text>联系客服</text>
				</view>
				<view class="pay">
					<view><span class="red_text">合计:&nbsp;&nbsp;￥39.9</span></view>
					<button type="default" class="button" @click="openPay">提交订单</button>
					<passkeyborad :show="show" v-on:close="changeVal"></passkeyborad>
				</view>
			</view>
		</view>
		<uni-popup ref="popupKeFu" type="bottom" background-color="#fff">
			<uni-list>
				<uni-list-item title="18893029302" />
				<uni-list-item title="呼叫" />
				<view @click="close">
					<uni-list-item title="取消" />
				</view>
			</uni-list>
		</uni-popup>
	</view>
</template>

<script>
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	export default {
		components: {
			passkeyborad
		},
		data() {
			return {
				show: false
			}
		},
		methods: {
			open() {
				this.$refs.popupKeFu.open('bottom')
			},
			close() {
				this.$refs.popupKeFu.close()
			},
			openPay() {
				this.show = true
			},
			changeVal(e) {
				this.show = e;
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		margin: 0;
		padding-top: 41rpx;
		background: linear-gradient(to bottom, #3586FE 35%, #1067EA 35%, #F7F7F7 35%);
	}
	.card_content {
		margin: auto;
		width: 700rpx;
		height: 700rpx;
		background-color: #fff;
		border-radius: 30rpx;
		overflow: hidden;
		padding-top: 40rpx;
	}

	.card_content_line {
		margin-left: 25rpx;
		margin-top: 30rpx;
		width: 650rpx;
		height: 2rpx;
		background-color: #F7F7F7;
		border: 4rpx solid #F7F7F7;
	}

	/* selectionOne的样式 */
	.card_selection {
		margin-left: 25rpx;
		padding-top: 50rpx;
	}

	.card_selection_one_item1 {
		display: flex;
		width: 650rpx;
		align-items: center;
	}

	.selection_icon image {
		width: 40rpx;
		height: 40rpx;
		padding-right: 16rpx;
	}

	.card_selection_one_item1 view:nth-child(1) {
		line-height: 40rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		text-align: left;
	}

	.card_selection_one_item1 view:nth-child(2) {
		line-height: 34rpx;
		color: #ACACAC;
		font-size: 24rpx;
		text-align: left;
	}

	.card_selection_one_item2 {
		width: 640rpx;
		padding: 30rpx 0;
		display: flex;
	}

	.selection_one_text2 {
		width: 630rpx;
		display: flex;
		justify-content: space-between;
	}

	.selection_one_text2 view:nth-child(2) {
		color: #ACACAC;
	}

	.card_selection_one_item3 {
		display: flex;
		width: 650rpx;
		padding-bottom: 15rpx;
	}

	.selection_one_text3 {
		width: 584rpx;
		display: flex;
		justify-content: space-between;
	}

	.selection_one_text3 .arrow {
		width: 28rpx;
		height: 28rpx;
		margin-top: 12rpx;
	}

	/* selectionTwo的样式 */
	.card_selection_two {
		padding: 15rpx 0;
		width: 650rpx;
		border-bottom: 2rpx solid #F7F7F7;
		border-top: 2rpx solid #F7F7F7;
	}

	.card_selection_two_text1 {
		width: 640rpx;
		display: flex;
		justify-content: space-between;
		padding-bottom: 15rpx;
		padding: 0rpx 0rpx 15rpx 40rpx;
	}

	.blue_text {
		color: blue;
	}

	.card_selection_two_text2 {
		display: flex;
		padding: 0rpx 0rpx 15rpx 40rpx;
	}

	.card_selection_two_text2 view:nth-child(1) {
		margin-right: 15rpx;
	}

	.card_selection_two_text2 view:nth-child(2) {
		color: red;
	}

	.card_selection_three {
		margin-top: 30rpx;
		display: flex;
		width: 640rpx;
	}

	.card_selection_three_content {
		display: flex;
		height: 52rpx;
	}

	.card_selection_three_content view:nth-child(1) {
		white-space: nowrap;
	}

	.card_selection_three_number {
		width: 404rpx;
		display: flex;
		justify-content: space-between;
	}

	.card_selection_three_number text {
		padding-left: 270rpx;
		color: red;
	}

	.card_selection_three_number .arrow {
		width: 28rpx;
		height: 28rpx;
		vertical-align: middle;
	}

	/* 底部内容 */
	.footer {
		width: 750rpx;
		height: 100rpx;
		margin-top: 402rpx;
		background-color: #fff;
	}

	.footer_content {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		align-items: center;
	}

	.customer image {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
		margin-right: 15rpx;
	}

	.pay {
		display: flex;
		width: 400rpx;
		justify-content: space-between;
		align-items: center;
	}

	.red_text {
		color: red;
	}

	.button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		height: 64rpx;
		background-color: #1067EA;
		border-radius: 30rpx;
		text-align: center;
		color: #fff;
	}

	.uni-list-item {
		text-align: center;
	}
</style>